JavaScript Map and Set - Examples

Map Example 1

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                      <Script>
                                let map = new Map();
                                map.set('name', 'John');
                                map.set('age', 30);
                                map.set('profession', 'Developer');
                                console.log(map.get('name'));  // John
                                console.log(map.size);  // 3
                                map.delete('age');
                                console.log(map.has('age'));  // false
                     </Script>
              </body>
              </html> 
                    

Map Example 2 - Simple Key-Value Pair

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                      <Script>
                       let countries = new Map();
                        countries.set('USA', 'Washington, D.C.');
                        countries.set('France', 'Paris');
                        countries.set('Japan', 'Tokyo');
                        console.log(countries.get('USA'));  // Washington, D.C.
                        console.log(countries.size);  // 3
                     </Script>
              </body>
              </html> 
                    

Map Example 3 - Looping Over Map

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                      <Script>
                          let fruits = new Map([
                                ['apple', 1],
                                ['banana', 2],
                                ['orange', 3]
                            ]);
                            fruits.forEach((value, key) => {
                                console.log(`${key}: ${value}`);
                            });
                     </Script>
              </body>
              </html>
                    

Set Example

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                      <Script>
                            let set = new Set();
                                set.add(1);
                                set.add(5);
                                set.add(1);  // Duplicate values are ignored
                                set.add(10);
                                console.log(set.size);  // 3
                                console.log(set.has(5));  // true
                                set.delete(1);
                                console.log(set.has(1));  // false
                     </Script>
              </body>
              </html>
                    

Set Example 2 - Unique Values

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                      <Script>
                        let numbers = new Set([1, 2, 3, 4, 4, 5, 6]);
                        console.log(numbers.size);  // 6 (4 is only counted once)
                     </Script>
              </body>
              </html>
                    

Set Example 3 - Checking if a Value Exists


              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                      <Script>
                            let letters = new Set(['a', 'b', 'c', 'd']);
                            console.log(letters.has('c'));  // true
                            console.log(letters.has('z'));  // false
                     </Script>
              </body>
              </html>